<template>
  <el-form-item v-if="data.type == 'select'&&!data.simpleMode" label="占位内容">
    <el-input v-model="data.placeholder" clearable placeholder="占位内容"></el-input>
  </el-form-item>

  <div class="el-form--label-top">
    <div class="el-form-item">
      <label class="el-form-item__label" style="padding: 0;"  v-if="!data.simpleMode">字典配置：</label>
      <div class="el-form-item__content">
        <el-tabs v-model="data.dicOption" stretch @tab-click="handleTabClick">
          <el-tab-pane label="静态数据" name="static">
            <draggable
              style="margin-top: 10px;"
              tag="ul"
              :list="data.dicData"
              :group="{ name: 'dic' }"
              ghost-class="ghost"
              item-key="label"
              handle=".drag-item"
            >
              <template #item="{ element, index }">
                <li style="margin-bottom: 5px;">
                  <el-icon :size="30">
                    <operation class="drag-item" style="margin: 0 5px; cursor: move;"></operation>
                  </el-icon>
<!--                  <el-input-->
<!--                    style="margin-right: 5px;"-->
<!--                    clearable-->
<!--                    v-model="element.label"-->
<!--                    @input="changeDicItem(element)"-->
<!--                    placeholder="label"-->
<!--                  ></el-input>-->


                  <el-input
                    v-if="data.type == 'radio' || data.type == 'checkbox' || data.type == 'select'"
                    clearable
                    v-model="element.label"
                    placeholder="描述"
                  ></el-input>

                  <el-input
                      :style="{ 'margin-right': data.type == 'select' ? '5px' : '0' }"
                      clearable
                      v-model="element.value"
                      @change="changeDicItem(element)"
                      placeholder="值"
                  ></el-input>


                  <el-button
                    style="margin-left: 5px;"
                    @click="handleRemoveFields(index)"
                    circle
                    plain
                    type="danger"
                    size="small"
                    :icon="Minus"
                  ></el-button>
                </li>
              </template>
            </draggable>
            <div style="margin-left: 22px;">
              <el-button type="text" @click="handleAddFields">添加列</el-button>
            </div>
          </el-tab-pane>

          <el-tab-pane label="远端数据" name="remote" v-if="!data.simpleMode">
            <div style="display: flex; margin-top: 10px;">
              <span style="width: 90px;">网址：</span>
              <el-input type="textarea" v-model="data.dicUrl" placeholder="远端数据字典网址" autosize></el-input>
            </div>
            <div style="display: flex;margin-top: 10px;">
              <span style="width: 80px;">远程搜索：</span>
              <el-switch v-model="data.remote"></el-switch>
            </div>
            <div style="display: flex;margin-top: 10px;">
              <span style="width: 90px;">请求方法：</span>
              <el-select v-model="data.dicMethod" placeholder="请求方法">
                <el-option label="POST" value="post"></el-option>
                <el-option label="GET" value="get"></el-option>
              </el-select>
            </div>
            <p v-if="data.dicMethod == 'post'">
              请求参数
              <avue-dynamic v-model="data.dicQueryConfig" :children="option"></avue-dynamic>
            </p>
            <p v-if="data.dicUrl">
              返回结构
              <monaco-editor
                v-model="dicFormatterJs"
                height="80"
                :keyIndex="`dict-formatter-${data.prop}`"
                :options="options"
              ></monaco-editor>
            </p>



          </el-tab-pane>

          <el-tab-pane label="字典数据" name="dicCode"  v-if="!data.simpleMode">
            <el-input v-model="data.dicCode" clearable placeholder="字典code" @change="changeDicCode"></el-input>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
  <div class="el-form--label-top"  v-if="data.dicOption == 'remote'" >
    <div class="el-form-item">
      <label class="el-form-item__label" style="padding: 0;">字典key配置：</label>
      <div class="el-form-item__content">
        <ul>
          <li v-for="(value, key) in data.props" :key="key" style="margin-bottom: 5px;">
            <span style="width: 50px">{{ key }}</span>
            <el-input v-model="data.props[key]" clearable placeholder="key配置"></el-input>
          </li>
        </ul>
      </div>
    </div>
  </div>
<!--  <el-form-item v-if="data.dicOption == 'remote'" label="重新请求字典(crud)" label-width="150px">-->
<!--    <el-switch v-model="data.dicFlag"></el-switch>-->
<!--  </el-form-item>-->
  <template v-if="data.type == 'select'">
    <el-form-item label="是否多选">
      <el-switch v-model="data.multiple"></el-switch>
    </el-form-item>
    <el-form-item label="是否可拖拽" label-width="110px" v-if="data.multiple">
      <template #label>
        <el-link
          :underline="false"
          href="https://avuejs.com/form/form-select.html#%E6%8B%96%E6%8B%BD"
          target="_blank"
        >
          是否可拖拽
          <el-icon>
            <question-filled></question-filled>
          </el-icon>
        </el-link>
      </template>
      <el-switch v-model="data.drag"></el-switch>
    </el-form-item>
    <el-form-item label="多选数量限制" label-width="110px" v-if="data.multiple">
      <el-input-number
        v-model="data.limit"
        controls-position="right"
        placeholder="多选限制"
        :min="0"
        :max="data.dicData.length"
      ></el-input-number>
    </el-form-item>
    <div class="el-form--label-top"  v-if="data.multiple">
      <div class="el-form-item">
        <label class="el-form-item__label" style="padding: 0;">级联配置：</label>
        <div class="el-form-item__content">
          <draggable
            tag="ul"
            :list="data.cascader"
            :group="{ name: 'cascader' }"
            ghost-class="ghost"
            item-key="label"
            handle=".drag-item"
          >
            <template #item="{ index }">
              <li style="margin-bottom: 5px;">
                <el-icon :size="30">
                  <operation class="drag-item" style=" margin: 0 5px; cursor: move;"></operation>
                </el-icon>
                <el-input v-model="data.cascader[index]" clearable placeholder="级联属性值"></el-input>
                <el-button
                  style="margin-left: 5px;"
                  @click="handleRemoveCascaderItemFields(index)"
                  circle
                  plain
                  type="danger"
                  size="small"
                  :icon="Minus"
                ></el-button>
              </li>
            </template>
          </draggable>
          <div style="margin-left: 22px;">
            <el-button type="text" @click="handleAddCascaderItemFields">添加列</el-button>
          </div>
        </div>
      </div>
    </div>

    <el-form-item
      v-if="data.cascader && data.cascader.length > 0 && !data.simpleMode"
      label="级联默认选中"
      label-width="110px"
    >
      <el-input-number
        v-model="data.cascaderIndex"
        controls-position="right"
        placeholder="级联默认选中"
        :min="0"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="是否可清空" label-width="110px"       v-if="!data.simpleMode">
      <el-switch v-model="data.clearable"></el-switch>
    </el-form-item>
    <el-form-item label="是否可搜索" label-width="110px"       v-if="!data.simpleMode">
      <el-switch v-model="data.filterable"></el-switch>
    </el-form-item>
    <el-form-item label="开启虚拟" label-width="110px"       v-if="!data.simpleMode">
      <el-switch v-model="data.virtualize"></el-switch>
    </el-form-item>
  </template>
  <template v-if="['radio', 'checkbox'].includes(data.type) && !data.simpleMode">
    <el-form-item label="边框" v-if="!data.button">
      <el-switch v-model="data.border"></el-switch>
    </el-form-item>
    <el-form-item label="按钮" v-if="!data.border && !data.simpleMode">
      <el-switch v-model="data.button"></el-switch>
    </el-form-item>
  </template>
  <el-form-item label="尺寸" v-if="(data.button || data.border)&& !data.simpleMode">
    <el-radio-group v-model="data.size">
      <el-radio-button label="large">大</el-radio-button>
      <el-radio-button label="default">默认</el-radio-button>
      <el-radio-button label="small">小</el-radio-button>
    </el-radio-group>
  </el-form-item>
</template>

<script setup>
import { Operation, Minus, QuestionFilled } from '@element-plus/icons-vue'
import Draggable from 'vuedraggable'
import MonacoEditor from '../../../utils/monaco-editor'
</script>

<script>
export default {
  name: "config-select",
  props: ['data'],
  data() {
    return {
      option: {
        column: [{
          type: 'input',
          prop: 'key',
          label: 'key'
        }, {
          type: 'input',
          prop: 'value',
          label: 'value'
        }]
      },
      options: {
        fullScreen: true,
        minimap: {
          enabled: false,
        },
      },
      dicFormatterJs: '',
    }
  },
  watch: {
    'data.prop': {
      handler() {
        const { dicFormatterJs } = this.data
        this.dicFormatterJs = dicFormatterJs ? dicFormatterJs + '' : '(res) => {\r\n  return res.data.data.data\r\n}';
      },
      immediate: true
    },
    dicFormatterJs: {
      handler(val) {
        try {
          this.data.dicFormatterJs = val
          this.data.dicFormatter = eval( this.data.dicFormatterJs)
        } catch (e) {
          // console.error(e)
        }
      }
    }
  },
  methods: {
    changeDicItem(item) {
      //item.label = item.value
    },
    changeDicCode() {
      if(this.data.dicCode){
        this.data.dicData = this.$dictObject[this.data.dicCode];
      }else{
        this.data.dicData =[];
      }

    },
    handleRemoveFields(index) {
      this.data.dicData.splice(index, 1)
    },
    handleAddFields() {
      const i = Math.ceil(Math.random() * 99999)
      this.data.dicData.push({ label: `字段${i}`, value: `col_${i}` })
    },
    handleRemoveCascaderItemFields(index) {
      this.data.cascader.splice(index, 1)
    },
    handleAddCascaderItemFields() {
      this.data.cascader.push('')
    },
    handleTabClick({ name }) {
      if (name == 'remote' && !this.data.dicQueryConfig) this.data.dicQueryConfig = []
    }
  },
}
</script>
